<template>
  <div>
    <div ref="manyBarDiv" style="width: 100%;height:400px;"></div>
    <div
        style="width: 300px;height: 200px;border: 1px whitesmoke solid;background-color: whitesmoke;box-shadow: 3px 3px 3px 3px #aeb3c5;
        text-align: center;line-height: 30px;margin-left: 600px;margin-top: 0px">
      <h5>查询销售统计信息</h5>

      销售年份:
      <el-select v-model="year" placeholder="请选择类别" size="large">
        <el-option v-for="s in yearList" :label="s" :value="s"></el-option>
      </el-select>
      <el-button type="success" @click="findType()" style="margin-top: 30px;margin-left: 90px">查询</el-button>
    </div>
  </div>

</template>

<script>
import * as echarts from 'echarts';
import axios from "axios";

export default {
  name: "countMonthSell",
  data() {
    return {
      year: "",
      yearList: [],
      gradeList: [],
      month: ['1','2','3','4','5','6','7','8','9','10','11','12'],
      productType: []

    }
  },
  methods: {
    createManyBar() {
      var manyBarChart = echarts.init(this.$refs.manyBarDiv);

      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ];
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          };
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          });
        }
      };
      const labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
          name: {}
        }
      };

      this.gradeList.forEach(n => {
        n.label = labelOption;
      });

      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: this.productType,
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar', 'stack']},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {show: false},
            data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: this.gradeList
      };


      manyBarChart.setOption(option);
    },
    async findAll() {
      await axios.get("/project/month/findByYear", {params: {year: this.year}}).then(resp => {
        let list = resp.data;
        this.gradeList.forEach(e => {
          for (let i = 1; i <=12 ; i++) {
            e.data.push("0");
          }
          for (let i = 1; i <= 12; i++) {
            var a = i;
            list.forEach(k => {
              if (k.month == a && k.type ==e.name) {
                e.data.splice(a-1,1,k.money );
              }
            });
          }
        })


        // list.forEach(n => {
        //   this.gradeList.forEach(c => {
        //     if (n.type == c.name) {
        //       c.data.push(n.money)
        //       alert(c.data)
        //     }
        //   });
        // });


      });

      this.createManyBar();
    }
    ,
    async findYear() {

      await axios.get("/project/month/findYear").then(resp => {
        this.yearList = resp.data;
        this.year = this.yearList[this.yearList.length - 1];
      });
      this.findType();


    },
    async findType() {
      this.productType = [];
      this.month = [];
      this.gradeList = [];
      await axios.get("/project/product/findType").then(resp => {
        let list = resp.data;
        this.productType = list;
        this.productType.forEach(n => {
          let info = {};
          info.name = n;
          info.type = 'bar';
          info.emphasis = {
            focus: 'series'
          };
          info.data = [];
          this.gradeList.push(info);
        });
        this.findAll();
      })
    },
  },
  mounted() {
  },
  created() {
    this.findYear();

  }
}
</script>

<style scoped>

</style>